I'm trying to store values using VueX. I'm using Vuex 4.0 not the 3.0.

So I'm trying to commit a value like this, as I was used to in Vuex 3 :

...
 this.$store.commit("changerusername", u)
...

So I tried this :

Inside my main.js I have this :

import { createApp } from "vue";
import { store } from "./store";
import App from "./App.vue";

const app = createApp(App);
app.use(store);
app.mount("#app");

Inside my store/store.js, I have this :

import vue from "vue";
import { createStore } from "vuex";

export const store = createStore({
  state: {
    username: null,
    token: null,
  },
  getters: {
    getUsername: function (state) {
      return `${state.username}`;
    },
  },
  mutation: {
    changeusername: function (state, newusername) {
      state.username = newusername;
    }
  },
});

App.vue have this :

<template>
  <router-view />
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "app",
});
</script>

Ok now, inside the file where I want to do my commit, I wrote this :

Imports :

import { useQuasar } from "quasar";
import { defineComponent } from "vue";
import { ref } from "vue";
import axios from "axios";
import { useStore } from "vuex";

The setup :

    setup() {
      const store = useStore();

      return {
        store,
      };
    },

And I use it like this :

      loginArrow: function (u, p) {
        this.store.commit("changeusername", u);
      },

But when I do this I got this error : injection "store" not found..

What I am doing wrong?